<template>
  <div class="home">
    <v-header></v-header>
    <div class="section">
      <div class="sectionA">
        <div class="news-details">
          <div class="news-details-head">
            <i class="el-icon-arrow-left">
              <el-button type="text" @click="fallback">返回</el-button>
            </i>
            <div class="news-details-head-crumbs"></div>
          </div>
          <div class="news-details-main">
            <div class="main-title">{{ newsDatailsData.bidTitle }}</div>
            <div class="main-content" v-html="newsDatailsData.bidContent"></div>
            <p v-if="annexFileList.length || false" style="font-size: 16px;">附件列表：</p>
            <p v-for="(item, index) in annexFileList" :key="index">
              <el-link style="color: blue;margin-left: 20px;" target="_blank" :href="location + item.apath">{{ item.aname }}</el-link>
            </p>
          </div>
        </div>
      </div>
    </div>
    <v-footer class="footer"></v-footer>
  </div>
</template>
<script>
import VHeader from '@/views/layout/header'
import VFooter from '@/views/layout/footer'
import { getFileList, queryBiddingStatusListLeft } from '@/request/api'

export default {
  components: {
    VHeader,
    VFooter
  },
  data() {
    return {
      dataPath: [],
      newsDatailsData: {},
      annexFileList: [],
      location: ''
    }
  },
  created() {
    this.location = process.env.VUE_APP_API_BASEURL
    this.queryBiddingStatusListLeft({
      baId: this.$route.params.id.toString()
    })
    this.getAnnexFileList()
  },
  mounted() {
    this.dataPath = this.$route.matched
  },
  watch: {
    $route(newUrl, oldUrl) {
      if (newUrl !== oldUrl) {
        this.queryBiddingStatusListLeft({
          baId: newUrl.params.id.toString()
        })
      }
    }
  },
  methods: {
    fallback() {
      if (window.history.length <= 1) {
        this.$router.push({ path: '/' })
        return false
      } else {
        this.$router.go(-1)
      }
    },

    // 新闻详情
    queryBiddingStatusListLeft(options) {
      console.log(options)
      queryBiddingStatusListLeft(options).then(res => {
        this.newsDatailsData = res.data[0]
      })
    },
    getAnnexFileList() {
      getFileList({ pubId: this.$route.params.id, module: 'GGFB' }).then(res => {
        this.annexFileList = res.data
        console.log(this.annexFileList)
      })
    },
    downFile(path) {}
  }
}
</script>
<style lang="scss" scoped>
.home {
  // width:100%;
  // height: 100%;
  // min-width: 1200px;
  // padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  height: 100%;

  .section {
    width: 100%;
    flex: 1 0 auto;
    background: #f4f5f9;

    .sectionA {
      width: 1200px;
      margin: 0 auto;
    }
  }

  .footer {
    flex: 0 0 auto;
  }
}

.news-details-head {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: #3d3d65;
  margin: 50px 0;
}

.main-title {
  font-size: 20px;
  color: #3d3d65;
  text-align: center;
  line-height: 26px;
}

.main-source {
  font-size: 14px;
  color: #9ba8b5;
  line-height: 23px;
  margin-top: 14px;
  text-align: center;
  margin-bottom: 34px;

  span {
    margin-right: 20px;
  }
}

.main-content {
  font-size: 16px;
  color: rgb(77, 78, 80);
  line-height: 1.8em;
  margin-bottom: 50px;
  text-indent: 2em;
}

.main-content p {
  margin-bottom: 30px;
}

.main-content img {
  width: 505px;
  height: 310px;
  display: block;
  margin: 24px auto 52px;
}

.turn-over {
  padding-bottom: 50px;
}

.piece {
  display: flex;
  font-size: 16px;
  line-height: 2em;
  color: #3d3d65;
  cursor: pointer;
}

.piece span {
  margin-right: 8px;
}

.piece p:hover {
  color: #2d87fa;
}
</style>
